<template>
  <div id="app">
    <van-tabs
      v-if="license"
      v-model="active"
      size="mini"
      background="#f1f2f3"
      border
      color="#1989fa"
    >
      <van-tab title="操作" name="index">
        <IndexPage  @submit="key = $event" :version="version"></IndexPage>
      </van-tab>
      <van-tab title="代理" name="proxy">
        <ProxyPage  @submit="key = $event" :version="version"></ProxyPage>
      </van-tab>
    </van-tabs>
    <div v-else class="empty">
      授权文件错误
    </div>
  </div>
</template>
<script>
import manifest from '../manifest'
import IndexPage from './index.vue'
import ProxyPage from './proxy.vue'
import {valid} from './common'
export default {
  components: { IndexPage, ProxyPage},
  name: 'app',
  data() {
    return {
      license: false,
      sid: '',
      version: manifest.version,
      active: 'index'
    }
  },
  async created() {
    this.license = await valid()
    this.sid = await this.$getItem('sid') || false
    this.$nextTick(() => {
      this.active = localStorage.getItem('active') || 'index'
    })
  },
  watch: {
    active() {
      console.log(this.active)
      localStorage.setItem('active', this.active)
    }
  },
  methods: {
    clickHandle() {
      chrome.tabs.create({ url: 'http://mowan.io' })
    }
  }
}
</script>
<style>
#app {
  width: 400px;
  max-height: 350px;
  height: 350px;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  /*background: #f5f5f5;*/
  display: flex;
  flex-direction: column;
  font-size: 1.2em;
}
.empty {
  font-size: 20px;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-direction: column;
}
.empty a {
  cursor: pointer;
}
.empty .img {
  width: 100px;
  margin-top: -40px;
}

.tab-page {
  text-align: left;
  padding: 10px;
  font-size: 12px;
  line-height: 1;
}
.item {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4px;
}
.checkbox input {
  margin-right: 5px;
}
.tab-page .items-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 4px;
}
.tab-page .block {
  margin-bottom: 10px;
}
.tab-page .block h1 {
  margin-top: 4px;
  margin-bottom: 4px;
  font-size: 12px;
}

h1,
h2,
h3,
h4,
h5 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0 0 10px;
}
.items-gather-scope .item {
  width: 40%;
}
.tab-page .items-gather-scope .item input {
  width: 75px;
  margin-left: 4px;
}

.tab-page .item input {
  margin-right: 4px;
}
.tab-page .items-avoid .item {
  width: 49%;
}
.tab-page .interval {
  width: 40px;
  margin-right: 5px;
}
.tab-page .items-monster-troop .item {
  width: 50%;
}
.tab-page .items-monster-troop .item input {
  width: 65px;
  margin-left: 4px;
}
.tab-page .items-basic .item {
  width: 50%;
}
.tab-page .autoNFT .checkbox {
  display: inline-block;
}
.checkbox label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.NoAction {
  pointer-events: none;
}
.dis {
  cursor: no-drop;
}
.van-button--mini {
  margin: 2px;
}
.myitem {
  line-height: 1.4;
  margin-top: 4px;
  margin-bottom: 4px;
}

.van-uploader {
  width: 100%;
}
.van-uploader__wrapper {
  width: 100%;
}
.van-uploader__input-wrapper {
  width: 100% !important;
}
</style>
